import './css/register.css'
import { Button, Form, Input, Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import logo from '../assets/images/logo192.png'
import { NavLink } from 'react-router-dom'
import axios from 'axios';


export default function Register() {

    const onFinish = (values) => {
        // console.log(typeof values.password)
        let formdata = new FormData()
        formdata.append('username', values.username)
        formdata.append('password', values.password)
        formdata.append('headerImg', values.headerImg.file)

        // 封装的方法 可能是数据传过去数据就有问题了 所以选择直接用库发
        axios({
            method: 'post',
            url: "/api1/register",
            data: formdata
        }).then(res => {
            if (res.Code === 1) message.success('注册成功！！')
            else message.error('程序错误！！')
        })
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    // 返回按钮
    // const fan = () => {

    // }


    return (
        <div id="register">
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <h2><img src={logo} alt='图片出错'/>注册页面</h2>
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{ required: true, message: '请再次输入密码！' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item label="头像" name="headerImg" valuePropName='file'>
                    <Upload listType="picture-card" maxCount={1} beforeUpload={(file, fileList) => false}>
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>上传图片</div>
                        </div>
                    </Upload>
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        注册
                    </Button>
                    <NavLink to='/home'>
                        <Button type="primary">
                            返回
                        </Button>
                    </NavLink>
                </Form.Item>
            </Form>
        </div>
    )
}